<template>
  <div class="contentDate">
    <i
      class="iconfont"
      @click="openDatePicker">&#xe65b;</i><a>{{ rangeDate }}</a>
    <div
      v-if="showDate"
      class="date">
      <div class="date-title"><span>日历</span><i @click="cancel">X</i></div>
      <label>开始<input
        v-model="startDate"
        class="time"
        placeholder=""
        @click="selectInput(0)"></label>
      <label>结束<input
        v-model="endDate"
        class="time"
        placeholder=""
        @click="selectInput(1)" ></label>
      <date-picker
        v-if="showDatePicker"
        :range="range"
        :lunar="lunar"
        :zero="true"
        @select="select" />
      <div class="btn_group">
        <button
          class="form-btn"
          @click="cancel">返回</button>
        <button
          class="form-btn"
          @click="confirm">确定</button>
      </div>
      <mask-loading
        v-show="isShowMask"
        :msg="msg"
        :num="num"
        :width="width"
        @closeMask="closeMask" />
    </div>
  </div>
</template>
<script>
import DatePicker from './datePicker.vue'
import maskLoading from '@/components/mask/mask'
export default {
  components: {
    DatePicker,
    maskLoading
  },
  props: {
    range: {
      type: Boolean,
      default: false
    },
    lunar: {
      type: Boolean,
      default: false
    },
    rangeDate: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      showDatePicker: true,
      showDate: false,
      startDate: '',
      endDate: '',
      msg: '选择日期超出当前日期',
      isShowMask: false,
      num: 2,
      width: '90%',
      index: 0
    }
  },
  mounted () {

  },
  methods: {
    openDatePicker () {
      // this.startDate = ''
      // this.endDate = ''
      this.showDate = true
      this.showDatePicker = true
    },
    selectInput (index) {
      if (index === 0) {
        this.startDate = ''
      } else {
        this.endDate = ''
      }
      this.showDatePicker = true
      this.index = index
    },
    select (date) {
      let that = this
      let now = (new Date()).getTime()
      let selectDate = (new Date(date)).getTime()
      if (selectDate > now) {
        this.msg = '选择日期超出当前日期'
        this.isShowMask = true
        setTimeout(function () {
          that.isShowMask = false
        }, 1000)
        return
      }
      if (this.index === 0) {
        this.startDate = date
      } else {
        this.endDate = date
      }
      if (this.startDate !== '' && this.endDate !== '') {
        let start = (new Date(this.startDate)).getTime()
        let end = new Date(this.endDate).getTime()
        if (start > end) {
          this.startDate = this.endDate = date
        }
      }
    },
    confirm () {
      let that = this
      let reg = /^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/
      if (this.startDate === '' && this.endDate === '') {
        this.msg = '请选择日期'
        this.isShowMask = true
        setTimeout(function () {
          that.isShowMask = false
        }, 1000)
        return
      }
      if (this.startDate !== '' && !reg.test(this.startDate)) {
        this.msg = '开始日期格式不对'
        this.startDate = ''
        this.isShowMask = true
        setTimeout(function () {
          that.isShowMask = false
        }, 1000)
        return
      }
      if (this.endDate !== '' && !reg.test(this.endDate)) {
        this.msg = '结束日期格式不对'
        this.isShowMask = true
        this.endDate = ''
        setTimeout(function () {
          that.isShowMask = false
        }, 1000)
        return
      }
      this.$emit('confirmDate', this.startDate, this.endDate)
      this.showDate = false
    },
    cancel () {
      this.showDate = false
    },
    formatDate () {
      let now = new Date()
      let year = now.getFullYear()
      let mon = now.getMonth() + 1
      let day = now.getDate()
      if (mon < 10) {
        mon = '0' + mon
      }
      if (day < 10) {
        day = '0' + day
      }
      return year + '-' + mon + '-' + day
    },
    closeMask () {
      this.isShowMask = false
    }
  }
}
</script>
<style lang="scss">
$f_color : #ffffff;
$bg_color_s : #0E0A2E;
$border-c:#79C4EE;
$bg_color: #251F5B;
$f_size:.26rem;
.contentDate {
  .date {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    width: 100%;
    height: 100%;
    background: $bg_color;
    label {
      display: block;
      height: 1rem;
      line-height: 1rem;
      font-size: 0.26rem;
      float: left;
      width: 45%;
      margin-left: .25rem;
      color: #65C4EA;
      .time {
        border: none;
        border-bottom: 0.02rem solid $f_color;
        background:$bg_color;
        color: $f_color;
        font-size: $f_size;
        width: 2.5rem;
        padding-left:.1rem;
      }
    }
    .date-title{
      width: 100%;
      height: .5rem;
      line-height: .5rem;
      position: relative;
      left: 0;
      top: 0;
      text-align: center;
      font-size: $f_size;
      span {
        display: inline-block;
        height: .5rem;
        line-height: .5rem;
        text-align: center;
        font-size: $f_size;
      }
      i {
          position: absolute;
          right:.05rem;
          top:0;
          margin-right: .06rem;
          font-size: $f_size;
          color: $f_color;
        }
    }
    .btn_group{
      position: absolute;
      bottom: 0;
      left:0;
      height:.8rem;
      width:100%;
      button {
        width: 49%;
        height: 0.6rem;
        line-height: 0.6rem;
        text-align: center;
        color: $f_color;
        font-size: $f_size;
        display: inline-block;
        background: #2F3C86;
        border: #79C4EE;
        border-radius: 0.05rem;
        border: none;
        flex: 1;
        margin-top: .1rem;
        margin-bottom: .2rem;
      }
    }
  }
  i {
    width: 0.4rem;
    height: 0.4rem;
    float: left;
    font-size: 0.4rem;
    color: #69A8E6;
  }
  a{
    height: 0.4rem;
    float: right;
    font-size: 0.26rem;
    color: #ffffff;
    margin-right: .2rem;
  }
}
</style>
